import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Card, Button } from "antd";
import { observer } from "mobx-react-lite";
import counterStore from "@/store/counterStore";
import styles from "./index.module.less";
import { getSomeData } from "@/service";

const List = () => {
  const navigate = useNavigate();
  const [listData, setListData] = useState([]);

  useEffect(() => {
    getSomeData()
  }, [])

  useEffect(() => {
    setListData([
      {
        id: 1,
        title: "新闻标题11111",
        desc: "描述描述11111",
        date: "2024-05-30 11:01:00",
      },
      {
        id: 2,
        title: "新闻标题22222",
        desc: "描述描述22222",
        date: "2024-05-30 12:02:00",
      },
      {
        id: 3,
        title: "新闻标题33333",
        desc: "描述描述33333",
        date: "2024-05-30 13:03:00",
      },
    ]);
  }, []);

  const goToDetail = (id) => {
    navigate(`/detail/${id}`);
  };

  return (
    <div className={styles.wrapper}>
      {listData.map((item) => (
        <Card
          key={item.id}
          title={item.title}
          extra={<div>{item.date}</div>}
          style={{ marginBottom: 20 }}
        >
          {item.desc}...
          <Button type="link" onClick={() => goToDetail(item.id)}>
            More
          </Button>
        </Card>
      ))}
      <div>
        mobx 案例 Count: {counterStore.count}
        <Button
          style={{ marginLeft: 5, marginRight: 5 }}
          type="primary"
          onClick={() => counterStore.increment()}
        >
          +
        </Button>
        <Button type="primary" onClick={() => counterStore.decrement()}>
          -
        </Button>
      </div>
    </div>
  );
};

// 这里要注意用observer包一下
export default observer(List);
